<ion-header no-border>
  <ion-navbar hideBackButton="true">
  </ion-navbar>
</ion-header>

<ion-content no-bounce>
  <div class="fixed">
    <h3 class="title" translate>Notifications by email</h3>
    <div *ngIf="!showConfirmForm">
      <img src='assets/img/app/onboarding/push-notifications.svg' width="200" />
    </div>
  </div>
</ion-content>

<ion-footer no-border>
  <div class="email-form" *ngIf="!showConfirmForm">
    <p class="description" translate>Where would you like to receive email notifications about payments?</p>
    <form [formGroup]="emailForm" (ngSubmit)="showConfirm()">
      <ion-item>
        <ion-input type="email" formControlName="email" placeholder="{{'Email' | translate}}"></ion-input>
      </ion-item>

      <ion-item no-lines>
        <ion-label>{{'Get news and updates from BitPay' | translate}}</ion-label>
        <ion-checkbox formControlName="accept" checked="false"></ion-checkbox>
      </ion-item>
      <button ion-button class="button-standard" type="submit" [disabled]="!emailForm.valid">
        {{'Continue' | translate}}
      </button>
    </form>
    <button ion-button clear class="button-standard btn-transparent primary-color" (click)="skip()">
      {{'Skip' | translate}}
    </button>
  </div>

  <div class="email-form" *ngIf="showConfirmForm">
    <div>
      <p translate>Is this email address correct?</p>
      <p>{{ emailForm.value.email }}</p>
    </div>
    <button ion-button class="button-standard" (click)="save()">
      {{'Confirm' | translate}}
    </button>
    <button ion-button class="button-standard btn-transparent primary-color" (click)="showConfirm()">
      {{'Edit' | translate}}
    </button>
  </div>
</ion-footer>